import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    ImageBackground,
    ScrollView,
} from 'react-native';
import {Button, Input} from 'react-native-elements'
import {StackActions, NavigationActions} from 'react-navigation';

import Global from '../common/global'
import Util from '../common/util'
import {Toast} from 'teaset'
import {loginSuccess} from '../actions/mineAction'
import Api from '../common/api'
import store from '../store/store'


export default class Login extends Component {

    static navigationOptions = {
        header: null
    }

    constructor(props) {
        super(props);

        this.state = {
            phone: '',
            pwd: '',
            isLoading: false,
        };
    }


    login = () => {
        let {phone, pwd} = this.state
        if (!phone) {
            Toast.fail('请输入手机号')
            return
        }
        if (!pwd) {
            Toast.fail('请输入密码')
            return
        }
        this.setState({isLoading: true});
        let params = {phone, pwd}
        Util.fetchPost(Api.loginUrl, params)
            .then(({code, msg, data}) => {
                this.setState({isLoading: false});
                if (code == '1') {
                    Toast.fail(msg)
                } else {
                    // 登陆成功
                    Global.storage.save({
                        key: 'user',
                        data: params,
                        expires: null
                    });
                    store.dispatch(loginSuccess(data));
                    const resetAction = StackActions.reset({
                        index: 0,
                        actions: [NavigationActions.navigate({routeName: 'Tab'})],
                    });
                    this.props.navigation.dispatch(resetAction);
                }
            }).catch(error => {
            this.setState({isLoading: false});
            console.log(error)
            Toast.fail(Util.ErrorMessage)
        });
    }

    toPage = (page) => {
        this.props.navigation.navigate('Register')
    }

    render() {
        return (
            <View style={styles.container}>
                <ImageBackground
                    source={require('../images/bsign_g.png')}
                    style={styles.bgImage}
                >
                    <ScrollView style={{flex: 1}}>
                        <View style={styles.view}>
                            <Text style={styles.title}>海洋环境应急指挥</Text>
                            <Input
                                placeholder='请输入注册手机号'
                                placeholderTextColor={"#ccc"}
                                containerStyle={[styles.containerStyle, {marginBottom: 20}]}
                                inputStyle={styles.inputStyle}
                                keyboardType={"numeric"}
                                leftIcon={
                                    <Text style={styles.label}>账号</Text>
                                }
                                onChangeText={(phone) => this.setState({phone})}
                                maxLength={11}
                                selectionColor={"#fff"}
                                inputContainerStyle={[styles.inputContainerStyle]}
                            />
                            <Input
                                placeholder='请输入登录密码'
                                placeholderTextColor={"#ccc"}
                                containerStyle={[styles.containerStyle, {marginBottom: 40}]}
                                inputStyle={styles.inputStyle}
                                secureTextEntry={true}
                                onChangeText={(pwd) => this.setState({pwd})}
                                leftIcon={
                                    <Text style={styles.label}>密码</Text>
                                }
                                selectionColor={"#fff"}
                                inputContainerStyle={[styles.inputContainerStyle]}
                            />
                            <Button
                                title="登录"
                                loading={this.state.isLoading}
                                titleStyle={{fontSize: 16, color: '#fff'}}
                                buttonStyle={{
                                    backgroundColor: "#176DD7",
                                    width: Global.width - 56,
                                    height: 45,
                                    borderRadius: 4
                                }}
                                onPress={this.login}
                                containerStyle={{marginBottom: 20}}
                            />
                            <View style={{
                                flexDirection: 'row',
                                alignItems: 'center',
                                justifyContent: 'flex-end',
                                width: Global.width,
                                paddingHorizontal: 23
                            }}>

                                <Button
                                    clear
                                    onPress={() => this.toPage('Register')}
                                    title="注册"
                                    titleStyle={{fontSize: 14, color: '#fff', textAlign: 'right'}}
                                    buttonStyle={styles.link}
                                />

                            </View>
                        </View>
                    </ScrollView>
                </ImageBackground>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    bgImage: {
        flex: 1,
        top: 0,
        left: 0,
        width: Global.width,
        height: Global.height,
        justifyContent: 'center',
        alignItems: 'center',
    },
    view: {
        width: Global.width,
        height: Global.height,
        justifyContent: 'center',
        alignItems: 'center',
        paddingBottom: Global.paddingBottom + 50
    },
    title: {
        fontSize: 20,
        color: '#fff',
        fontWeight: 'bold',
        marginBottom: 100
    },
    inputContainerStyle: {
        width: Global.width - 56,
        height: 45,
        borderRadius: 4,
        borderWidth: 1,
        borderColor: '#D5D5D5',
        marginRight: 0
    },
    label: {
        color: '#fff',
        fontSize: 14
    },
    inputStyle: {
        color: '#fff',
        fontSize: 14,
    },
    containerStyle: {
        width: Global.width - 56,
        height: 45,
    },
    link: {
        height: 20,
    }
});
